<template>
  <div style="margin-top: 10px;display: flex;">
    <el-form-item label="扩展方式">
      <el-radio-group v-model="optionModel.gridAdvStyle.gridAutoFlow">
        <el-radio-button label="row">行</el-radio-button>
        <el-radio-button label="column">列</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </div>
  <div style="margin-top: 10px">
    <el-button type="primary" @click="addGridItem" style="width:100%">添加子元素</el-button>
  </div>
  <div style="margin-top: 10px;display: flex;justify-content: space-between">
    行间隔：
    <el-input-number v-model="rowGap.number" :step="1" :min="1" @change="setGridGap('row')"></el-input-number>
    <el-select v-model="rowGap.unit" style="width:100px" @change="setGridGap('row')">
      <el-option label="px" value="px">
      </el-option>
      <el-option label="%" value="%">
      </el-option>
    </el-select>
  </div>
  <div style="margin-top: 10px;display: flex;justify-content: space-between">
    列间隔：
    <el-input-number v-model="columnGap.number"
                     :step="1"
                     :min="1"
                     @change="setGridGap('column')"
    ></el-input-number>
    <el-select v-model="columnGap.unit" style="width:100px" @change="setGridGap('column')">
      <el-option label="px" value="px">
      </el-option>
      <el-option label="%" value="%">
      </el-option>
    </el-select>
  </div>
  <div style="margin-top: 10px">
    <el-button type="success" @click="addRow" style="width:100%;">添加行</el-button>
  </div>
  <div class="item-setting" v-for="(item, index) in rows">
    <el-input-number v-model="item.number"
                     :step="1"
                     :min="1"
                     @change="rowChanged(index,$event)"
    ></el-input-number>
    <el-select style="width: 80px" v-model="item.unit" @change="rowChanged(index,$event)">
      <el-option v-for="(item, index) in unit" :label="item" :value="item">
      </el-option>
    </el-select>
    <el-button type="danger" :disabled="rows.length===1" @click="deleteRow(index)">删除</el-button>
  </div>
  <div style="margin-top: 10px">
    <el-button type="success" @click="addColumn" style="width:100%;">添加列</el-button>
  </div>
  <div class="item-setting" v-for="(item, index) in columns">
    <el-input-number v-model="item.number"
                     :step="1"
                     :min="1"
                     @change="columnChanged(index,$event)"
    ></el-input-number>
    <el-select style="width: 80px" v-model="item.unit" @change="columnChanged(index,$event)">
      <el-option v-for="(item, index) in unit" :label="item" :value="item">
      </el-option>
    </el-select>
    <el-button type="danger" :disabled="columns.length===1" @click="deleteColumn(index)">删除</el-button>
  </div>
</template>
<script>
import i18n from "@/utils/i18n";
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin";
import {deepClone, generateId} from "@/utils/util";
import XEUtils from "xe-utils"

export default defineComponent({
  name: "gridAdvStyle-editor",
  mixins: [i18n, propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      unit: ['fr', 'px', '%', 'auto'],
      rows: [],
      columns: [],
      rowGap: {},
      columnGap: {}
    }
  },
  watch: {
    selectedWidget: {
      handler() {
        // console.log('watch handle')
        this.rows = this.getRowOrColumnItems('gridTemplateRows')
        this.columns = this.getRowOrColumnItems('gridTemplateColumns')
        this.rowGap = this.extractNumberAndUnit(this.optionModel.gridAdvStyle.gridRowGap)
        this.columnGap = this.extractNumberAndUnit(this.optionModel.gridAdvStyle.gridColumnGap)
      },
      immediate: true
    }
  },
  computed: {
    gridStyle() {
      return this.optionModel.gridAdvStyle
    },
  },
  methods: {
    /*添加网格子元素*/
    addGridItem() {
      this.selectedWidget.cols.push(this.generateColumn())
    },
    addRow() {
      this.rows.push({
        number: 1,
        unit: 'fr'
      })
      this.convertGridObjToGridStyle('gridTemplateRows', 'rows')
    },
    addColumn() {
      this.columns.push({
        number: 1,
        unit: 'fr'
      })
      this.convertGridObjToGridStyle('gridTemplateColumns', 'columns')
    },
    deleteRow(index) {
      this.rows.splice(index, 1)
      this.convertGridObjToGridStyle('gridTemplateRows', 'rows')
    },
    deleteColumn(index) {
      this.columns.splice(index, 1)
      this.convertGridObjToGridStyle('gridTemplateColumns', 'columns')
    },
    generateColumn() {
      const col = deepClone(this.designer.getContainerByType('grid-adv-col'))
      let tmpId = generateId()
      col.id = `grid-adv-col-${tmpId}`
      col.name = `gridAdvCol${tmpId}`
      return col
    },
    getRowOrColumnItems(rowOrColumn) {
      return this.optionModel.gridAdvStyle[rowOrColumn].split(' ').map(item => this.extractNumberAndUnit(item))
    },
    extractNumberAndUnit(str) {
      const regex = /(\d+)(\D*)/;
      const match = str.match(regex);
      if (match) {
        // 第一个括号匹配数字部分，第二个括号匹配可能的小数部分，第三个括号匹配单位
        const number = parseInt(match[1]); // 提取数字部分并转换为浮点数
        const unit = match[2]; // 提取单位部分，注意可能为空字符串如果无单位
        return {number, unit};
      } else {
        // 如果没有匹配到内容，可以返回默认值或者抛出错误，这里选择返回null
        return null;
      }
    },
    rowChanged(index, value) {
      if (XEUtils.isNumber(value)) {
        this.rows[index].number = value
      } else {
        this.rows[index].unit = value
      }
      this.convertGridObjToGridStyle('gridTemplateRows', 'rows')
    },
    columnChanged(index, value) {
      if (XEUtils.isNumber(value)) {
        this.columns[index].number = value
      } else {
        this.columns[index].unit = value
      }
      this.convertGridObjToGridStyle('gridTemplateColumns', 'columns')
    },
    convertGridObjToGridStyle(gridStyleItem, dataItem) {
      this.optionModel.gridAdvStyle[gridStyleItem] = this[dataItem].map(item => {
        if (item.unit === 'auto') {
          return item.unit
        } else {
          return `${item.number}${item.unit}`
        }
      }).join(' ')
    },
    setGridGap(type) {
      if (type === 'row') {
        this.optionModel.gridAdvStyle.gridRowGap = this.rowGap.number + this.rowGap.unit
      } else {
        this.optionModel.gridAdvStyle.gridColumnGap = this.columnGap.number + this.columnGap.unit
      }
    }
  },
})
</script>


<style scoped lang="scss">
.item-setting {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  /*div:not(:last-child) {
    margin-right: 5px;
  }*/
}
</style>
